<template>
    <div>
        <!-- 日期 -->
        <div class="block">
            <span class="demonstration">时间范围</span>
            <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="dataValue"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            >
            </el-date-picker>
            <el-button type="primary" @click="search">查询</el-button>
        </div>

        <div class="content">
            <Charts :options="options" v-if="flag" />
        </div>
    </div>
</template>

<script>
import Charts from "@/components/Charts.vue"
import { orderTotal } from "@/apis/order.js"
import moment from "moment";
export default {
    components: {
        Charts,
    },
    data() {
        return {
            dataValue: [],
            options: {
                title: "订单统计",
                legend: ["订单数量"],
                xData: [],
                orderAmount: []
            },
            flag: false
        };
    },
    methods: {
        // 查询按钮
        search() {
            this.getOrder()
        },

        // 获取订单数据
        async getOrder(){
            this.flag = false
            let {data} = await orderTotal({
                date: JSON.stringify(this.dataValue)
            })
            // 遍历数组转换日期格式
            var xData = data.map(item=>{
                return item.orderTime = moment(item.orderTime).format("YYYY-MM-DD HH-mm")
            })

            var yData = data.map(item=>{
                return item.orderAmount
            })
            this.options.xData = xData;
            this.options.orderAmount = yData;
            this.flag = true
        }
    },

    created(){
        // 调用获取订单函数
        this.getOrder()
    }
};
</script>

<style lang="less" scoped>
.block {
    .demonstration {
        color: #67696d;
        margin-right: 10px;
    }
    .el-button {
        margin-left: 10px;
    }
}
.content {
    width: 100%;
    height: 500px;
    background: #fff;
    #myCharts {
        margin-top: 20px;
        width: 1200px;
        height: 500px;
        padding: 20px;
        box-sizing: border-box;
    }
}
</style>